<template>
	<section>
	  <section class="login_message">
	    <input type="text" maxlength="11" placeholder="手机/邮箱/用户名">
	  </section>
	  <section class="login_verification">
	    <input type="text" placeholder="密码" v-model="pwd" v-if="pwdShow">
	    <input type="password" placeholder="密码" v-model="pwd" v-else>
	    <div class="switch_button" :class="pwdShow?'on':'off'" @click="showPwdChange">
	      <div class="switch_circle" :class="{right:pwdShow}"></div>
	      <span class="switch_text">{{pwdShow?'abc':''}}</span>
	    </div>
	  </section>
	  <section class="login_message">
	    <input type="text" maxlength="11" placeholder="验证码">
	    <img class="get_verification" src="./images/captcha.svg" alt="captcha">
	  </section>
	</section>
</template>

<script>
	export default{
		data(){
			return{
				pwd:'0',
				pwdShow:false // 密码的显示与隐藏文本框
			}
		},
		methods:{
			// 显示与隐藏密码
			showPwdChange(){
				this.pwdShow = !this.pwdShow
			}
		}
	}
</script>

<style>
</style>